<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>WebRTC 测试页面</title>
  <style>
    body { font-family: Arial, sans-serif; max-width: 800px; margin: 0 auto; padding: 20px; }
    button { padding: 10px 15px; margin: 5px; cursor: pointer; }
    #log { margin: 10px 0; padding: 10px; background: #f0f0f0; height: 200px; overflow-y: auto; }
  </style>
</head>
<body>
  <h1>WebRTC 功能测试</h1>
  
  <div>
    <h2>本地预览</h2>
    <video id="localVideo" autoplay muted width="320" height="240"></video>
  </div>
  
  <div>
    <button id="btnTest1">测试1: 获取摄像头</button>
    <button id="btnTest2">测试2: 连接LiveKit</button>
    <button id="btnTest3">测试3: 测试Egress API</button>
  </div>
  
  <div id="log">日志输出：</div>

  <script>
    const localVideo = document.getElementById('localVideo');
    const logElement = document.getElementById('log');
    
    function log(message) {
      const line = document.createElement('div');
      line.textContent = `${new Date().toLocaleTimeString()}: ${message}`;
      logElement.appendChild(line);
      logElement.scrollTop = logElement.scrollHeight;
      console.log(message);
    }
    
    // 测试1: 获取摄像头
    document.getElementById('btnTest1').onclick = async () => {
      try {
        log('正在请求摄像头和麦克风权限...');
        const stream = await navigator.mediaDevices.getUserMedia({
          video: true,
          audio: true
        });
        
        localVideo.srcObject = stream;
        log('✅ 成功获取媒体设备');
      } catch (err) {
        log(`❌ 获取媒体设备失败: ${err.message}`);
      }
    };
    
    // 测试2: 连接LiveKit
    document.getElementById('btnTest2').onclick = async () => {
      try {
        log('正在加载LiveKit客户端...');
        
        // 动态加载LiveKit客户端
        const script = document.createElement('script');
        script.src = 'https://cdn.jsdelivr.net/npm/livekit-client@2.0.9/dist/livekit-client.umd.min.js';
        script.onload = async () => {
          try {
            log('LiveKit客户端已加载');
            
            const room = new LivekitClient.Room();
            const wsUrl = `ws://${window.location.hostname}:7880`;
            const token = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjQ4MjI0ODkwODksImlzcyI6ImRldmtleSIsIm5hbWUiOiJ1c2VyMSIsInN1YiI6InVzZXIxIiwicm9vbSI6InJvb20xIn0.KVVEWMXv9SsJcZ5eFJdKYiUYHYMdGzTNFDFYUHj9cV0';
            
            log(`尝试连接到: ${wsUrl}`);
            await room.connect(wsUrl, token);
            log('✅ 成功连接到LiveKit服务器');
          } catch (err) {
            log(`❌ 连接LiveKit失败: ${err.message}`);
          }
        };
        script.onerror = () => {
          log('❌ 加载LiveKit客户端失败');
        };
        document.head.appendChild(script);
      } catch (err) {
        log(`❌ 测试失败: ${err.message}`);
      }
    };
    
    // 测试3: 测试Egress API
    document.getElementById('btnTest3').onclick = async () => {
      try {
        log('正在测试Egress API...');
        
        const data = {
          room_name: 'room1',
          layout: 'grid',
          audio_only: false,
          video_only: false,
          output: {
            rtmp: {
              urls: ['rtmp://rtmp:1935/live/room1']
            }
          }
        };
        
        log(`发送请求到: http://${window.location.hostname}:8080/room_composite/rtmp`);
        const response = await fetch(`http://${window.location.hostname}:8080/room_composite/rtmp`, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify(data)
        });
        
        if (response.ok) {
          const result = await response.json();
          log(`✅ Egress API响应成功: ${JSON.stringify(result)}`);
        } else {
          const error = await response.text();
          log(`❌ Egress API响应失败: ${response.status} - ${error}`);
        }
      } catch (err) {
        log(`❌ 测试失败: ${err.message}`);
      }
    };
    
    log('测试页面已加载，请点击按钮进行测试');
  </script>
</body>
</html> 